<template>
  <div class="pages">
    <div class="nav_box" :style="{ display: view }">
      <div class="logo">直播助手使用说明</div>
      <Nav :nav="nav" :opennav="opennav" @click1="clickhandle" @click2="openTitle" />
    </div>
    <div class="main">
      <div
        class="close"
        @click="closeNav"
        :style="{ left: `${view === 'block' ? '270px' : '10px'}` }"
      >
        X
      </div>
      <Content />
    </div>
    <div
      class="modal"
      :style="{ display: `${imgurl ? 'block' : 'none'}` }"
      @click="() => closeModel()"
    >
      <div class="box">
        <img :src="imgurl" alt="" />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue'
import Nav from './components/index.vue'
import Content from './components/content.vue'

const offsetList: any = []
let H2list: any = []
let nowDemo: any = {}
let scrollDemo: Element | null = null
// 当前导航
const nav = ref<string>('一、硬件连接方法')
const opennav = ref<string>('1直播管家安装说明')
const imgurl = ref<string>('')
const view = ref<string>('block')
const closeNav = () => {
  view.value = view.value === 'block' ? 'none' : 'block'
}
// 滚动监听
const scrollBody = (top: number | undefined) => {
  offsetList.forEach((item: any) => {
    if (top > item.top - 20) {
      nowDemo = item
    }
  })
  if (nowDemo && nowDemo?.demo) {
    nav.value = nowDemo?.demo?.innerText
    switch (nowDemo?.demo?.parentNode.getAttribute('id')) {
      case 'nav_1':
        opennav.value = '1直播管家安装说明'
        break
      case 'nav_2':
        opennav.value = '1直播管家安装说明'
        break
      case 'nav_3':
        opennav.value = '2设备预处理'
        break
      case 'nav_4':
        opennav.value = '3场控评论'
        break
      case 'nav_5':
        opennav.value = '4常见问题'
        break
      default:
        break
    }
  }
  // console.log('nowDemo', nowDemo);
}
// 遍历信息获取所有的H2
const getAllDemo = (demo: Element) => {
  if (demo) {
    const imglist = document.querySelectorAll('img')
    const is = Array.from(imglist).every((item: any) => item.complete === true)
    if (is === false) {
      setTimeout(() => {
        getAllDemo(demo)
      }, 1000)
    }
    if (is === true) {
      const H2 = document.querySelectorAll('h2')
      H2list = H2
      for (let index = 0; index < H2.length; index += 1) {
        const ele = H2[index]
        offsetList.push({ top: ele.offsetTop, demo: ele })
      }
    }
  }
}
// 导航点击滚动定位
const clickhandle = (e: string) => {
  nav.value = e
  const h2: any = Array.from(H2list).find((item: any) => item.innerText === e)
  scrollDemo.scrollTop = h2.offsetTop
}
// 设置打开目录
const openTitle = (e: string) => {
  opennav.value = e
}
const closeModel = () => {
  imgurl.value = ''
}
onMounted(() => {
  const [a] = Array.from(document.getElementsByClassName('main'))
  scrollDemo = a
  scrollDemo.addEventListener('scroll', () => {
    scrollBody(scrollDemo?.scrollTop)
  })
  scrollDemo.addEventListener('click', (e: any) => {
    const demo = e.target
    const src = demo.getAttribute('src')
    if (src) {
      // console.log('点击的图片', src)
      imgurl.value = src
    }
  })
  getAllDemo(scrollDemo)
})
onUnmounted(() => {
  scrollDemo?.removeEventListener('scroll', () => {
    scrollBody(scrollDemo?.scrollTop)
  })
})
</script>
<style lang="less">
.pages {
  width: 100%;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  .nav_box {
    height: 100vh;
    overflow: hidden;
    border-right: 1px solid #f2f2f2;
    width: 260px;
    .logo {
      font-size: 20px;
      color: #333;
      line-height: 50px;
      text-align: center;
      height: 50px;
      border-bottom: 1px solid #f2f2f2;
    }
  }
  .main {
    flex: 1;
    overflow-y: auto;
    height: 100vh;
    position: relative;
    .close {
      position: fixed;
      top: 0;
      left: 270px;
      width: 30px;
      height: 30px;
      border: 1px solid #999;
      border-radius: 2px;
      font-size: 24px;
      color: #999;
      line-height: 28px;
      text-align: center;
      cursor: pointer;
    }
  }
  .modal {
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 1);
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    .box {
      width: 70vw;
      height: 80vh;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -35vw;
      margin-top: -40vh;
      img {
        max-width: 100%;
        max-height: 100%;
        display: block;
        margin: 0 auto;
      }
    }
  }
}
</style>
